<template>
	<view class="uni_box login">
		<navbar title='兑换码' backgroundColor='#010101'>
		</navbar>
		<view class="content">
			<view class="listitem">
				<input class="iteminput" type="text" v-model="code" placeholder="请输入12位兑换码">
			</view>
			<view class="duibtn" @click="realnamePost">
				兑换
			</view>
			<view class="guize">
				<text class="tit">兑换码规则</text>
				<text class="miao">1.请先完成实名认证，仅支持年满18岁的用户。</text>
                 <text class="miao">2.输入正确的兑换码后，可获得对应数字藏品。</text>
				 <text class="miao">3.一个兑换码仅限兑换一次，不可重复使用。</text>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code:'',//兑换码
			};
		},
		methods:{
			async realnamePost() {
				let code = this.code;
				if (!code) {
					this.$refs.uToast.show({
						title: "请输入兑换码",
						type: "error"
					})
					return
				};
				await this.$u.api.exchange({
					code: this.code
				});
				this.$u.toast("操作成功");
				setTimeout(() => {
					uni.navigateBack({
						delta:1,//返回层数，2则上上页
					})
				}, 1000);
			},
		}
	}
</script>

<style scoped lang="scss">
  page{
  	background-color: #010101;
  }
  .content{
	  padding: 30rpx;
	  .listitem{
	  	width: 100%;
	  	height: 92rpx;
	  	background: #222222;
	  	border-radius: 8rpx;
	  	padding: 0 20rpx;
	  	margin-bottom: 36rpx;
	  	display: flex;
	  	flex-direction: row;
	  	align-items: center;
	  	.qu{
	  		font-size: 28rpx;
	  		font-family: PingFang SC-Regular, PingFang SC;
	  		font-weight: 400;
	  		color: #FFFFFF;
	  		margin-right: 20rpx;
	  	}
	  	.iteminput{
	  		font-size: 28rpx;
	  		color: #fff;
	  		// padding: 0 20rpx;
	  		width: 70%;
	  	}
	  	.fayan{
	  		margin-left: auto;
	  		font-size: 28rpx;
	  		font-family: PingFang SC-Regular, PingFang SC;
	  		font-weight: 400;
	  		color: #73FAB5;
	  	}
	  	.yan{
	  		margin-left: auto;
	  		width: 28rpx;
	  		height: 40rpx;
	  	}
	  }
	  .duibtn{
		  width: 100%;
		  height: 88rpx;
		  background: linear-gradient(90deg, #9394F3 0%, #82E7CB 54%, #22FC94 100%);
		  border-radius: 8rpx;
		  opacity: 1;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  font-size: 32rpx;
		  font-family: PingFang SC-Bold, PingFang SC;
		  font-weight: bold;
		  color: #232323;
		  margin-top: 70rpx;
	  }
	  .guize{
		   margin-top: 60rpx;
		  .tit{
			  font-size: 32rpx;
			  font-family: PingFang SC-Bold, PingFang SC;
			  font-weight: bold;
			  color: #FFFFFF;
			  display: block;
			  margin-bottom: 24rpx;
		  }
		  .miao{
			  display: block;
			  font-size: 28rpx;
			  font-family: PingFang SC-Medium, PingFang SC;
			  font-weight: 500;
			  color: #999999;
		  }
	  }
  }
  
</style>
